<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Facewound HLSL PostProcessing Pixel Shader tutorial</title></head>
<body><div id="wm-ipp" style="display: block; position: relative; padding: 0px 5px; min-height: 70px; min-width: 800px; z-index: 9000;">
<div id="wm-ipp-inside" style="position:fixed;padding:0!important;margin:0!important;width:97%;min-width:780px;border:5px solid #000;border-top:none;background-image:url(http://staticweb.archive.org/images/toolbar/wm_tb_bk_trns.png);text-align:center;-moz-box-shadow:1px 1px 3px #333;-webkit-box-shadow:1px 1px 3px #333;box-shadow:1px 1px 3px #333;font-size:11px!important;font-family:'Lucida Grande','Arial',sans-serif!important;">
   <table style="border-collapse:collapse;margin:0;padding:0;width:100%;"><tbody><tr>
   <td style="padding:10px;vertical-align:top;min-width:110px;">
   <a href="http://wayback.archive.org/web/" title="Wayback Machine home page" style="background-color:transparent;border:none;"><img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/wayback-toolbar-logo.png" alt="Wayback Machine" border="0" height="39" width="110"></a>
   </td>
   <td style="padding:0!important;text-align:center;vertical-align:top;width:100%;">

       <table style="border-collapse:collapse;margin:0 auto;padding:0;width:570px;"><tbody><tr>
       <td style="padding:3px 0;" colspan="2">
       <form target="_top" method="get" action="http://wayback.archive.org/web/form-submit.jsp" name="wmtb" id="wmtb" style="margin:0!important;padding:0!important;"><input name="url" id="wmtbURL" value="http://www.facewound.com/tutorials/shader1/" style="width:400px;font-size:11px;font-family:'Lucida Grande','Arial',sans-serif;" onfocus="javascript:this.focus();this.select();" type="text"><input name="type" value="replay" type="hidden"><input name="date" value="20080516200157" type="hidden"><input value="Go" style="font-size:11px;font-family:'Lucida Grande','Arial',sans-serif;margin-left:5px;" type="submit"><span id="wm_tb_options" style="display:block;"></span></form>
       </td>
       <td style="vertical-align:bottom;padding:5px 0 0 0!important;" rowspan="2">
           <table style="border-collapse:collapse;width:110px;color:#99a;font-family:'Helvetica','Lucida Grande','Arial',sans-serif;"><tbody>
			
           <!-- NEXT/PREV MONTH NAV AND MONTH INDICATOR -->
           <tr style="width:110px;height:16px;font-size:10px!important;">
           	<td style="padding-right:9px;font-size:11px!important;font-weight:bold;text-transform:uppercase;text-align:right;white-space:nowrap;overflow:visible;" nowrap="nowrap">
               
		                <a href="http://web.archive.org/web/20071022185557/http://www.facewound.com/tutorials/shader1/" style="text-decoration:none;color:#33f;font-weight:bold;background-color:transparent;border:none;" title="22 Oct 2007"><strong>OCT</strong></a>
		                
               </td>
               <td id="displayMonthEl" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); color: rgb(255, 255, 0); font-size: 11px ! important; font-weight: bold; text-transform: uppercase; width: 34px; height: 15px; padding-top: 1px; text-align: center;" title="You are here: 20:01:57 May 16, 2008">May</td>
				<td style="padding-left:9px;font-size:11px!important;font-weight:bold;text-transform:uppercase;white-space:nowrap;overflow:visible;" nowrap="nowrap">
               
                       Jun
                       
               </td>
           </tr>

           <!-- NEXT/PREV CAPTURE NAV AND DAY OF MONTH INDICATOR -->
           <tr>
               <td style="padding-right:9px;white-space:nowrap;overflow:visible;text-align:right!important;vertical-align:middle!important;" nowrap="nowrap">
               
		                <a href="http://web.archive.org/web/20071022185557/http://www.facewound.com/tutorials/shader1/" title="18:55:57 Oct 22, 2007" style="background-color:transparent;border:none;"><img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/wm_tb_prv_on.png" alt="Previous capture" border="0" height="16" width="14"></a>
		                
               </td>
               <td id="displayDayEl" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); color: rgb(255, 255, 0); width: 34px; height: 24px; padding: 2px 0px 0px; text-align: center; font-size: 24px; font-weight: bold;" title="You are here: 20:01:57 May 16, 2008">16</td>
				<td style="padding-left:9px;white-space:nowrap;overflow:visible;text-align:left!important;vertical-align:middle!important;" nowrap="nowrap">
               
                       <img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/wm_tb_nxt_off.png" alt="Next capture" border="0" height="16" width="14">
                       
			    </td>
           </tr>

           <!-- NEXT/PREV YEAR NAV AND YEAR INDICATOR -->
           <tr style="width:110px;height:13px;font-size:9px!important;">
				<td style="padding-right:9px;font-size:11px!important;font-weight: bold;text-align:right;white-space:nowrap;overflow:visible;" nowrap="nowrap">
               
		                <a href="http://web.archive.org/web/20070123180251/http://www.facewound.com/tutorials/shader1/" style="text-decoration:none;color:#33f;font-weight:bold;background-color:transparent;border:none;" title="23 Jan 2007"><strong>2007</strong></a>
		                
               </td>
               <td id="displayYearEl" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); color: rgb(255, 255, 0); font-size: 11px ! important; font-weight: bold; padding-top: 1px; width: 34px; height: 13px; text-align: center;" title="You are here: 20:01:57 May 16, 2008">2008</td>
				<td style="padding-left:9px;font-size:11px!important;font-weight: bold;white-space:nowrap;overflow:visible;" nowrap="nowrap">
               
                       2009
                       
				</td>
           </tr>
           </tbody></table>
       </td>

       </tr>
       <tr>
       <td style="vertical-align:middle;padding:0!important;">
           <a href="http://wayback.archive.org/web/20080516200157*/http://www.facewound.com/tutorials/shader1/" style="color:#33f;font-size:11px;font-weight:bold;background-color:transparent;border:none;" title="See a list of every capture for this URL"><strong>29 captures</strong></a>
           <div style="margin:0!important;padding:0!important;color:#666;font-size:9px;padding-top:2px!important;white-space:nowrap;" title="Timespan for captures of this URL">11 Dec 04 - 16 May 08</div>
       </td>
       <td style="padding:0!important;">
       <a style="position:relative; white-space:nowrap; width:450px;height:27px;" href="http://web.archive.org/web/20120715000000/http://www.facewound.com/tutorials/shader1/" id="wm-graph-anchor">
       <div id="wm-ipp-sparkline" style="position:relative; white-space:nowrap; width:450px;height:27px;background-color:#fff;cursor:pointer;border-right:1px solid #ccc;" title="Explore captures for this URL">
			<img id="sparklineImgId" style="position:absolute; z-index:9012; top:0px; left:0px;" onmouseover="showTrackers('inline');" onmouseout="showTrackers('none');" onmousemove="trackMouseMove(event,this)" alt="sparklines" src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/graph.png" border="0" height="27" width="450">
			<img id="wbMouseTrackYearImg" style="display: none; position: absolute; z-index: 9010; left: 400px;" src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/transp-yellow-pixel.png" border="0" height="27" width="25">
			<img id="wbMouseTrackMonthImg" style="display: none; position: absolute; z-index: 9011; left: 413px;" src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/transp-red-pixel.png" border="0" height="27" width="2">
       </div>
		</a>

       </td>
       </tr></tbody></table>
   </td>
   <td style="text-align:right;padding:5px;width:65px;font-size:11px!important;">
       <a href="javascript:;" onclick="document.getElementById('wm-ipp').style.display='none';" style="display:block;padding-right:18px;background:url(http://staticweb.archive.org/images/toolbar/wm_tb_close.png) no-repeat 100% 0;color:#33f;font-family:'Lucida Grande','Arial',sans-serif;margin-bottom:23px;background-color:transparent;border:none;" title="Close the toolbar">Close</a>
       <a href="http://faq.web.archive.org/" style="display:block;padding-right:18px;background:url(http://staticweb.archive.org/images/toolbar/wm_tb_help.png) no-repeat 100% 0;color:#33f;font-family:'Lucida Grande','Arial',sans-serif;background-color:transparent;border:none;" title="Get some help using the Wayback Machine">Help</a>
   </td>
   </tr></tbody></table>

</div>
</div>
<!-- BEGIN WAYBACK TOOLBAR INSERT -->

<script type="text/javascript" src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/disclaim-element.js"></script>
<script type="text/javascript" src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/graph-calc.js"></script>
<script type="text/javascript" src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
var firstDate = 820454400000;
var lastDate = 1356998399999;
var wbPrefix = "http://web.archive.org/web/";
var wbCurrentUrl = "http:\/\/www.facewound.com\/tutorials\/shader1\/";

var curYear = -1;
var curMonth = -1;
var yearCount = 18;
var firstYear = 1996;
var imgWidth=450;
var yearImgWidth = 25;
var monthImgWidth = 2;
var trackerVal = "none";
var displayDay = "16";
var displayMonth = "May";
var displayYear = "2008";
var prettyMonths = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

function showTrackers(val) {
	if(val == trackerVal) {
		return;
	}
	if(val == "inline") {
		document.getElementById("displayYearEl").style.color = "#ec008c";
		document.getElementById("displayMonthEl").style.color = "#ec008c";
		document.getElementById("displayDayEl").style.color = "#ec008c";		
	} else {
		document.getElementById("displayYearEl").innerHTML = displayYear;
		document.getElementById("displayYearEl").style.color = "#ff0";
		document.getElementById("displayMonthEl").innerHTML = displayMonth;
		document.getElementById("displayMonthEl").style.color = "#ff0";
		document.getElementById("displayDayEl").innerHTML = displayDay;
		document.getElementById("displayDayEl").style.color = "#ff0";
	}
   document.getElementById("wbMouseTrackYearImg").style.display = val;
   document.getElementById("wbMouseTrackMonthImg").style.display = val;
   trackerVal = val;
}
function getElementX2(obj) {
	var thing = jQuery(obj);
	if((thing == undefined) 
			|| (typeof thing == "undefined") 
			|| (typeof thing.offset == "undefined")) {
		return getElementX(obj);
	}
	return Math.round(thing.offset().left);
}
function trackMouseMove(event,element) {

   var eventX = getEventX(event);
   var elementX = getElementX2(element);
   var xOff = eventX - elementX;
	if(xOff < 0) {
		xOff = 0;
	} else if(xOff > imgWidth) {
		xOff = imgWidth;
	}
   var monthOff = xOff % yearImgWidth;

   var year = Math.floor(xOff / yearImgWidth);
	var yearStart = year * yearImgWidth;
   var monthOfYear = Math.floor(monthOff / monthImgWidth);
   if(monthOfYear > 11) {
       monthOfYear = 11;
   }
   // 1 extra border pixel at the left edge of the year:
   var month = (year * 12) + monthOfYear;
   var day = 1;
	if(monthOff % 2 == 1) {
		day = 15;
	}
	var dateString = 
		zeroPad(year + firstYear) + 
		zeroPad(monthOfYear+1,2) +
		zeroPad(day,2) + "000000";

	var monthString = prettyMonths[monthOfYear];
	document.getElementById("displayYearEl").innerHTML = year + 1996;
	document.getElementById("displayMonthEl").innerHTML = monthString;
	// looks too jarring when it changes..
	//document.getElementById("displayDayEl").innerHTML = zeroPad(day,2);

	var url = wbPrefix + dateString + '/' +  wbCurrentUrl;
	document.getElementById('wm-graph-anchor').href = url;

   //document.getElementById("wmtbURL").value="evX("+eventX+") elX("+elementX+") xO("+xOff+") y("+year+") m("+month+") monthOff("+monthOff+") DS("+dateString+") Moy("+monthOfYear+") ms("+monthString+")";
   if(curYear != year) {
       var yrOff = year * yearImgWidth;
       document.getElementById("wbMouseTrackYearImg").style.left = yrOff + "px";
       curYear = year;
   }
   if(curMonth != month) {
       var mtOff = year + (month * monthImgWidth) + 1;
       document.getElementById("wbMouseTrackMonthImg").style.left = mtOff + "px";
       curMonth = month;
   }
}
//]]>
</script>

<style type="text/css">body{margin-top:0!important;padding-top:0!important;min-width:800px!important;}#wm-ipp a:hover{text-decoration:underline!important;}</style>

<script type="text/javascript">
 var wmDisclaimBanner = document.getElementById("wm-ipp");
 if(wmDisclaimBanner != null) {
   disclaimElement(wmDisclaimBanner);
 }
</script>
<!-- END WAYBACK TOOLBAR INSERT -->

<style type="text/css">
#paragraph
{
	clear: both;
	display: block;
	font-size: 13px;
	color: #44;
	padding: 10px;
	font-family: arial;
	width: 700px;
}
IMG
{
  clear: both;
  align: center;
  margin: 0px auto;
  margin: 10px;
  display: block;
}

.subtitle
{
	font-size: 24px;
	font-weight: bold;
	margin-top: 30px;
}

PRE
{
	font : 9px Fixedsys;
	margin: 20px;
	padding: 10px;
	border: 1px green dashed;
}
</style>

<div style="align: center; width: 600px; margin: 0px auto;">
<div id="paragraph">
Here I'll try to teach you the basics of HLSL shader programming with .fx files. 
The great thing about this technique is you don't need to have a compiler or anything - 
just edit the file and launch the game to see your results.<br><br>
I've made a test level in <a href="http://web.archive.org/web/20080516200157/http://www.facewound.com/">Facewound</a> called shader.

<img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/1.jpg">
So here's our level without any post processing. 
Our level is called shader so I'm going to create a file in the maps folder called 'shader.fx'.
<a href="http://web.archive.org/web/20080516200157/http://www.facewound.com/">Facewound</a> will automatically look for this file when you load the map - if it doesn't exist it won't do any post processing.
Paste this into the .fx file using notepad or something.
<pre>sampler2D g_samSrcColor;

float4 MyShader( float2 Tex : TEXCOORD0 ) : COLOR0
{
    float4 Color;
    
    Color = tex2D( g_samSrcColor, Tex.xy);
    return Color;
}


technique PostProcess
{
    pass p1
    {
        VertexShader = null;
        PixelShader = compile ps_2_0 MyShader();
    }

}
</pre>
So what the hell is all this.
<ul>
<li><strong>sampler2D g_samSrcColor;</strong> - this is the screen - where we're pulling the colour information from
</li><li><strong>float4 MyShader</strong> - this is our shader routine. 
The float4 means we're returning 4 floats (floats are numbers with 
decimals). The floats are red, green, blue and alpha (this is a COLOR).
</li><li><strong>float4 Color;</strong> - this creates a new float4 called Color for us to send off to the screen
</li><li><strong>Color = tex2D( g_samSrcColor, Tex.xy);</strong> - this gets the pixel at Tex.xy and sets Color to the same colour. (better explanation later on)
</li><li><strong>return Color;</strong> - this returns the Color (sends it to the screen)
</li><li><strong>technique PostProcess</strong> - This is the technique -
 It tells the code what version of vertex/pixel shader we're using. In 
this example we're not using a vertex shader and we're using pixel 
shader 2.0 (and calling function MyShader)
</li></ul>
I'm simplyfying a lot of this stuff so you can understand it - so don't take my explanations as gospel.
So as you should have worked out by now this shader does nothing more than return each pixel to the screen (or backbuffer).
It creates a Color - Sets it to whatever color the pixel is using TextureCoordinate Tex.xy - then returns it.
<div class="subtitle">Texture Coordinate</div>
Tex in our example is a float2. This means it has 2 floats in it. One is
 x and one is y. x is the across and y is down. They range from 0 to 1. 
This means that:-
<ul>
<li> Tex.x = 0 means the far left of the screen (or texture)
</li><li> Tex.x = 1 means the far right of the screen (or texture)
</li><li> Tex.x = 0.5 means the exact center of the screen (or texture)
</li><li> Tex.y = 0 means the very top of the screen (or texture)
</li><li> Tex.y = 1 means the very bottom of the screen (or texture)
</li><li> Tex.y = 0.5 means the exact center of the screen (or texture)
</li></ul>
We don't use pixels because it's using a texture (The whole screen is 
drawn onto a texture and passed then drawn onto the backbuffer (the 
screen) with the shader applied).
<div class="subtitle">Colours</div>
The colours are very similar to the Texture Coordinates. The colours 
have r, g, b and a. Each one of these has a range of 0-1 (when they're 
outputted). a or alpha is how transparent it is. This means that if r=0,
 g=0, b=1, a=1 then the outputted pixel will be pure blue.
<div class="subtitle">Assigning Values</div>
This is a pretty cool feature of HLSL. There are lots of ways you can apply (or retrieve) values, examples:
<ul>
<li>Color.r = 1; - Sets r (red) to 1
</li><li>Color.rgb = 1; - Sets r,g and b to 1
</li><li>Color.rb = 1; - Sets r and b to 1
</li><li>Color = 1; - Sets r,g,b and a to 1
</li></ul>
This makes it a lot similar to mess around with it.

<div class="subtitle">A Change</div>
Ok, lets change our code. Make this change:
<pre>Color = tex2D( g_samSrcColor, Tex.xy)*3;</pre>
We have added *3 to the end (before the ;). This multiplies the new colour by 3.
<img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/2.jpg" class="img">
If you've done this right it should look like the above. A simple change
 but with results. You can multiply it by anything you like.
<pre>Color = tex2D( g_samSrcColor, Tex.xy)*Tex.y;</pre>
<img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/3.jpg" class="img">
This isn't really portrayed well in the image. This multiplies it by 
it's vertical position. So the top pixel is multiplied by 0 and the 
bottom by 1. Note that this changes the alpha value too - so you get a 
visual feedback/motion blur kind of effect.


<div class="subtitle">Changing Colours</div>
It's possible to change each colour individually.
<pre>Color = tex2D( g_samSrcColor, Tex.xy);
Color.r = Color.r*2;
</pre>
<img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/4.jpg" class="img">
Let's go crazy.
<pre>Color = tex2D( g_samSrcColor, Tex.xy);
Color.r = Color.r*sin(Tex.y*100)*2;
Color.g = Color.g*cos(Tex.y*200)*2;
Color.b = Color.b*sin(Tex.y*300)*2;
</pre>
<img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/5.jpg" class="img">
<div class="subtitle">Sampling Coordinates</div>
You can edit the sample coordinates to stretch and manipulate the image.
<pre>Tex.y = Tex.y * 0.5;
Color = tex2D( g_samSrcColor, Tex.xy);
</pre>
<img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/6.jpg" class="img">
You're probably thinking "0.5! It should have made it smaller". It's 
easy to get confused with this stuff.
Think of it like this, it's saying "What's the color at x=0, y=0.5" and 
you're saying "You mean y=0.25". So it grabs the pixel colour at half 
the height - thus making it stretch. You're really manipulating what it 
samples from the original texture.
<pre>Tex.y = Tex.y + (sin(Tex.x*200)*0.01);
Color = tex2D( g_samSrcColor, Tex.xy);
</pre>
<img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/7.jpg" class="img">
So sin returns a range between -1 and 1, so we have to make it smaller 
because if we add 1 then we would be off the screen (coords range from 0
 to 1 remember).
In this example you can change 200 to change the length of the waves 
vertically and 0.01 to change the size of the waves.

<div class="subtitle">Variables from outside</div>
You can pass variables to the shader from inside the game. <a href="http://web.archive.org/web/20080516200157/http://www.facewound.com/">Facewound</a>
 currently sets a few variables - one of them being 'timeraslow'. 
timeraslow is just a variable that grows slowly. It slows down with 
bullettime - which means any effects you do with a shader stays in sync 
(Like water).
Here's an example in full.
<pre>sampler2D g_samSrcColor;

float timeraslow=1.0;

float4 MyShader( float2 Tex : TEXCOORD0 ) : COLOR0
{
    float4 Color;
    Tex.y = Tex.y + (sin(timeraslow)*0.01);
    Tex.x = Tex.x + (cos(timeraslow)*0.01);
   	Color = tex2D( g_samSrcColor, Tex.xy);
    return Color;
}


technique PostProcess
{
    pass p1
    {
        VertexShader = null;
        PixelShader = compile ps_2_0 MyShader();
    }

}
</pre>
<img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/8.jpg" class="img">
This gives you an animated under water feeling. The screenshot above is 
edited to try show that it's moving. We've declared our new variable at 
the top using 'float timeraslow=1.0;'. The rest should be pretty self 
explanatory.
If you explore <a href="http://web.archive.org/web/20080516200157/http://www.facewound.com/">Facewound</a>'s
 maps folder you will find out how we use this technique to make water. 
To do this we pass a variable called 'waterline' - then if Tex.y is over
 'waterline' we draw the water. Simple!

<div class="subtitle">Multiple Samples</div>
You can create a lot of interesting effects by sampling different positions and adding them together. Here's an example.
<pre>Color = tex2D( g_samSrcColor, Tex.xy);
Color += tex2D( g_samSrcColor, Tex.xy+0.001);
Color += tex2D( g_samSrcColor, Tex.xy+0.002);
Color += tex2D( g_samSrcColor, Tex.xy+0.003);
</pre>
<img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/9.jpg" class="img">
This should create a diagonal blur. It's really bright though! This is 
because we've added 4 samples together. We need to divide it by 4 to get
 back to normal.
<pre>Color = tex2D( g_samSrcColor, Tex.xy);
Color += tex2D( g_samSrcColor, Tex.xy+0.001);
Color += tex2D( g_samSrcColor, Tex.xy+0.002);
Color += tex2D( g_samSrcColor, Tex.xy+0.003);
Color = Color / 4;
</pre>
<img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/10.jpg" class="img">
Much better.




<div class="subtitle">Example Effects</div>
Here's a few example effects to get you started..
<pre>Color = tex2D( g_samSrcColor, Tex.xy);
Color -= tex2D( g_samSrcColor, Tex.xy+0.0001)*10.0f;
Color += tex2D( g_samSrcColor, Tex.xy-0.0001)*10.0f;
</pre>
<img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/11.jpg" class="img">
This makes stuff a lot sharper. You can use this same technique to do a couple more effects..
<pre>Color.a = 1.0f;
Color.rgb = 0.5f;
Color -= tex2D( g_samSrcColor, Tex.xy-0.001)*2.0f;
Color += tex2D( g_samSrcColor, Tex.xy+0.001)*2.0f;
Color.rgb = (Color.r+Color.g+Color.b)/3.0f;
</pre>
<img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/12.jpg" class="img">
Embossed
<pre>Color.a = 1.0f;
Color = tex2D( g_samSrcColor, Tex.xy);
Color.rgb = (Color.r+Color.g+Color.b)/3.0f;
 	
if (Color.r&lt;0.2 || Color.r&gt;0.8) Color.r = 0.0f; else Color.r = 1.0f;
if (Color.g&lt;0.2 || Color.g&gt;0.8) Color.g = 0.0f; else Color.g = 1.0f;
if (Color.b&lt;0.2 || Color.b&gt;0.8) Color.b = 0.0f; else Color.b = 1.0f;
</pre>
<img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/13.jpg" class="img">
Black and white. You should be able to work out how to do a simple grey scale from this.
<pre> 	Color = 1-tex2D( g_samSrcColor, Tex.xy);
 	Color.a = 1.0f;
</pre>
<img src="Facewound%20HLSL%20PostProcessing%20Pixel%20Shader%20tutorial_files/14.jpg" class="img">
Inverted


</div>

<div id="paragraph">
This should get you started editing the fx files. I'm really interested in what you achieve with this knowledge.
</div>
<div id="paragraph">
If you mess around and create something cool email it to me at <a href="mailto:shadertut@facewound.com">shadertut@facewound.com</a> and I'll add it to the examples here.
</div>

<div id="paragraph">
- Garry Newman
</div>








</div></body></html>
<!--
     FILE ARCHIVED ON 20:01:57 May 16, 2008 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 7:45:13 Oct 14, 2012.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
-->